yoga-layout-prebuilt

What is yoga-layout-prebuilt?

The yoga-layout-prebuilt npm package is a prebuilt version of the Yoga layout engine, which is a cross-platform layout engine that implements Flexbox. It is designed to be used in environments where you need a flexible and efficient layout system, such as in React Native or other UI frameworks.

What are yoga-layout-prebuilt's main functionalities?

Basic Flexbox Layout

This code demonstrates how to create a basic Flexbox layout with a root node and two child nodes using the yoga-layout-prebuilt package. It sets the dimensions of the root and child nodes, inserts the children into the root, and calculates the layout.

const yoga = require('yoga-layout-prebuilt');

const root = yoga.Node.create();
root.setWidth(500);
root.setHeight(500);

const child1 = yoga.Node.create();
child1.setWidth(100);
child1.setHeight(100);
root.insertChild(child1, 0);

const child2 = yoga.Node.create();
child2.setWidth(100);
child2.setHeight(100);
root.insertChild(child2, 1);

root.calculateLayout(yoga.UNDEFINED, yoga.UNDEFINED, yoga.DIRECTION_LTR);

console.log(root.getComputedLayout());
console.log(child1.getComputedLayout());
console.log(child2.getComputedLayout());

Align Items

This code demonstrates how to align items within a container using the yoga-layout-prebuilt package. It sets the alignment of items in the root node to center and calculates the layout.

const yoga = require('yoga-layout-prebuilt');

const root = yoga.Node.create();
root.setWidth(500);
root.setHeight(500);
root.setAlignItems(yoga.ALIGN_CENTER);

const child = yoga.Node.create();
child.setWidth(100);
child.setHeight(100);
root.insertChild(child, 0);

root.calculateLayout(yoga.UNDEFINED, yoga.UNDEFINED, yoga.DIRECTION_LTR);

console.log(root.getComputedLayout());
console.log(child.getComputedLayout());

Justify Content

This code demonstrates how to justify content within a container using the yoga-layout-prebuilt package. It sets the justification of content in the root node to center and calculates the layout.

const yoga = require('yoga-layout-prebuilt');

const root = yoga.Node.create();
root.setWidth(500);
root.setHeight(500);
root.setJustifyContent(yoga.JUSTIFY_CENTER);

const child = yoga.Node.create();
child.setWidth(100);
child.setHeight(100);
root.insertChild(child, 0);

root.calculateLayout(yoga.UNDEFINED, yoga.UNDEFINED, yoga.DIRECTION_LTR);

console.log(root.getComputedLayout());
console.log(child.getComputedLayout());

Other packages similar to yoga-layout-prebuilt

flexbox-layout

The flexbox-layout package is another implementation of the Flexbox layout system. It is designed to be used in JavaScript environments and provides similar functionality to yoga-layout-prebuilt. However, it may not be as optimized for performance as Yoga.

react-native-flexbox

The react-native-flexbox package is specifically designed for use with React Native. It provides a Flexbox layout system that integrates seamlessly with React Native components. While it offers similar functionality to yoga-layout-prebuilt, it is more tightly coupled with the React Native ecosystem.

css-layout

The css-layout package is an older implementation of the Flexbox layout system. It provides basic Flexbox functionality but lacks some of the advanced features and optimizations found in yoga-layout-prebuilt. It is also less actively maintained.

README

yoga-layout-prebuilt

Prebuilt yoga-layout package

Install

$ npm install yoga-layout-prebuilt

Usage

import Yoga from 'yoga-layout-prebuilt';
// Same as if imported from yoga-layout

License

MIT © Vadim Demedes